vue接收后端返回的文件流，下载文件（post和get）。前端的集中文件下载方式。大文件下载 |
您所在的位置：网站首页 › post 下载 › vue接收后端返回的文件流，下载文件（post和get）。前端的集中文件下载方式。大文件下载 |
vue接收后端返回的文件流，下载文件（post和get）。前端的集中文件下载方式。大文件下载
|
后台返回一个File类型（文件流、byte）的数据给前端。 前端请求的时候（建议小文件可以使用blob。大文件使用的时候，在获取文件流需要时间，等待时间会很久） 1、设置返回类型responseType，不管你用post\get\ect都要设置，还有post请求要设置content-type:multipart/from-data（跟文件上传一样，是接收文件的） 2、使用blob类型接收 3、销毁URL对象 //post请求要设置header axios.post("you api",options,{ responseType: 'blob',//设置返回类型 }, { headers:{ "content-type":"multipart/from-data", } }).then((res)=>{ const link=document.createElement('a'); try { //如果文件类型不确定的时候，可以不设置type let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'}); let _fileName = res.headers['content-disposition'].split(';')[1].split('=') [1];//文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到 link.style.display='none'; // 兼容不同浏览器的URL对象 const url = window.URL || window.webkitURL || window.moxURL; link.href=url.createObjectURL(blob); link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_')+1))); document.body.appendChild(link); link.click(); document.body.removeChild(link); url.revokeObjectURL(link.href);//销毁url对象 }catch (e) { console.log('下载的文件出错',e) } }).catch((err)=>{ console.log('请求出错',err.response.data.error); }) //get请求 axios.get("you api",{ responseType: 'blob',//设置返回类型 }).then((res)=>{ const link=document.createElement('a'); try { let blob = new Blob([res.data],{type: 'application/vnd.ms-excel'}); let _fileName = res.headers['content-disposition'].split(';')[1].split('=')[1];//文件名，中文无法解析的时候会显示 _(下划线),生产环境获取不到 link.style.display='none'; // 兼容不同浏览器的URL对象 const url = window.URL || window.webkitURL || window.moxURL; link.href=url.createObjectURL(blob); link.setAttribute('download', _fileName.substring(_fileName.lastIndexOf('_')+1))); document.body.appendChild(link); link.click(); document.body.removeChild(link); url.revokeObjectURL(link.href);//销毁url对象 }catch (e) { console.log('下载的文件出错',e) } }).catch(()=>{ })另外，我发现npm run build之后，前端的获取到的请求头是这样的，没有filename，不能获取到文件名
但浏览器获取到的是完整的。 所以后端的接口中要设置headers下面的属性，就可以获取到文件名了。(这个需要后端设置) Access-Control-Expose-Headers: Content-Disposition2、前端的几种文件下载方式 前端vue中实现文件下载的几种方法_小太阳的博客-CSDN博客_前端vue实现文件下载， 需要设置token的时候，还是使用responseType:'blob‘方式吧，不要直接用标签。另外要设置header的 3、大文件下载还想用浏览器自带的下载功能时（如下图），放开token ，直接使用
|
【本文地址】
今日新闻 |
推荐新闻 |